<template>
  <Module :cfg="moduleCfg" class="scroll">
    <div class="item-group">
      <ul>
        <li v-for="item in list" :key="item.id" @click="focusEvt(item.gis)" @dblclick="dblClick(item.id)">
          <p>
            <span class="type"><i class="iconfont" :class="item['icon']"></i>{{item['name']}}</span>
            <span class="time">{{item['time']}}</span>
          </p>
          <p>
            <span class="pos">{{item['pos']}}</span>
          </p>
        </li>
        <li class="none" v-if="list.length===0">暂无数据</li>
      </ul>
    </div>
  </Module>

</template>

<script>

  import moment from 'moment';
  import Module from 'comp/common/Module';

  moment.locale('zh-cn');
  export default {
    name: "LiveEvt",
    components: {
      Module
    },
    props: ['data'],
    data() {
      return {
        moduleCfg: {
          icon: WebCfg.icons.liveEvt,
          title: `实时路情`
        },
        list: [],
        dict: this.$kkui.cache.get('dict'),
        timer: null,
        isFrist: 1,

        msgIds: []
      }
    },
    mounted() {
      this.isFrist = 1;
    },
    watch: {
      data: {
        handler: function (n, o) {
          this.loadData();
        }
      }
    },
    methods: {
      loadData() {
        // 新增事件
        const newList = this.data['newList'];
        if (newList && newList.length > 0) {

          newList.forEach((item, index) => {
            const fn = () => {
              const camera = item['bscCamera'];
              if (item['eventTypeTwoCode'] === '-1') return false;
              if (camera) {

                // this.$parent.$parent.$refs.header.msg=JSON.stringify(item);

                const id = item.id,
                  code = item.state <= 1 ? item['eventTypeTwoCode'] : item['type'],
                  color = WebCfg.eventColor[code],
                  gis = [camera['longitude'], camera['latitude']];
                let name = this.dict['event'][code];
                if(!name) {

                }
                name = name.indexOf('-') > -1 ? name.split('-')[1] : name;

                this.list.unshift({
                  id,
                  name,
                  time: item['detectedTime'],
                  icon: WebCfg['icons'][code],
                  pos: camera['name'],
                  gis
                });


                const cfg = {
                  type: 'event',
                  id,
                  name,
                  color,
                  gis,
                  icon: code !== '-1' ? require(`@/assets/img/common/icon/event_${color}.png`) : '',
                  data: {
                    preData: item,
                    id,
                    type: 'event',
                    videoPath: item.videoPath,
                    imagePath: item.imgPath,
                    event: code,
                    state: item.state,
                    items: [
                      {
                        key: 'type',
                        label: '类型',
                        value: name,
                        color
                      },
                      {
                        key: 'state',
                        label: '状态',
                        value: this.dict['status'][item.state],
                        color
                      },
                      {
                        key: 'road',
                        label: '路段',
                        value: camera['road'],
                        color
                      },
                      {
                        key: 'pos',
                        label: '位置',
                        value: camera['road'] + ' ' + camera['stakeNo'] + ' ' + camera['name'],
                        color
                      },
                      {
                        key: 'detectedTime',
                        label: '时间',
                        value: item['detectedTime'],
                        color
                      }
                    ]
                  },
                };



                if (code === '002-007-002') {
                  cfg.data.items.splice(2, 0, {
                    key: 'visiable',
                    label: '能见度',
                    value: item['distance'] + '米',
                    color
                  });
                }

                this.$parent.$refs.map && this.$parent.$refs.map.addMarker(cfg);

              }
            };

            if (this.isFrist) {
              fn();
            } else {
              this.timer = setTimeout(() => {
                fn();
              }, 1000 * index)
            }
          });
          this.isFrist = 0;

        }

        // 清空消失的事件
        if (this.isFrist === 0) {
          const cancelList = this.data['cancelList'];
          if (cancelList && cancelList.length > 0) {
            cancelList.forEach(item => {
              const index = this.list.findIndex(itm => item.id === itm.id);
              if (index > -1) this.list.splice(index, 1);
              this.$parent.$refs.map.delMarker(item.id);
            });
          }
        }

      },
      focusEvt(gis) {
        const map = this.$parent.$refs.map;
        map.hiddenEvtCode = '';
        map.focusGis(gis);

        this.$parent.$refs.evtCountData.activeEvtCode = '';

      },
      dblClick(id) {
        this.$parent.$refs.map.showPanel(id);
      },

      changeType(id, name, icon) {
        const filterRst = this.list.filter(item => item.id === id);
        if (filterRst.length === 1) {
          filterRst[0].name = name;
          filterRst[0].icon = icon;
        }
      },
      deleteLi(id) {
        const index = this.list.findIndex(item => item.id === id);
        if (index > -1) {
          this.list.splice(index, 1);
        }
      }

    },
    beforeDestroy() {
      this.timer && clearTimeout(this.timer);
      this.timer = null;
    }
  }
</script>

<style scoped lang="scss">
  .item-group {
    overflow-y: auto;
    max-height: 100%;
    color: #999;

    ul {
      width: 100%;

      li {
        background-color: rgba(0, 0, 0, .1);
        padding: 5px;
        margin: 5px 0;
        position: relative;
        cursor: pointer;

        p {
          line-height: 24px;
          overflow: hidden;
        }

        .type {
          font-size: 16px;
          color: var(--font-green-color);

          i {
            margin-right: 3px;
          }
        }

        .time {
          font-size: 12px;
          position: absolute;
          right: 5px;
          top: 5px;
          opacity: .5;
        }

        .pos {
          font-size: 14px;
        }
      }

      li.none {
        line-height: 200px;
        text-align: center;
        color: #909399;
        font-size: 14px;
        background-color: transparent;
        cursor: default;
      }

      li:nth-child(2n) {
        background-color: rgba(0, 0, 0, .3);
      }
    }
  }
</style>
